<template>
    <div style="line-height: 50px">
        <div class="block">
            <span class="demonstration">日期查询</span>
            <el-date-picker
            v-model="value2"
            align="right"
            type="date"
            :onClick="sendTime()"
            placeholder="选择日期"
            :picker-options="pickerOptions">
            </el-date-picker>
        </div>
        <div>
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                prop="date"
                label="日期"
                width="150">
                </el-table-column>
                <el-table-column label="消费信息">
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
                </el-table-column>
                <el-table-column label="地址">
                    <el-table-column
                    prop="province"
                    label="省份"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="city"
                    label="市区"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    label="地址"
                    width="300">
                    </el-table-column>
                     <el-table-column
                    prop="outTime"
                    label="租用时间"
                    width="300">
                    </el-table-column>
                    <el-table-column
                    prop="zip"
                    label="消费"
                    width="120">
                    </el-table-column>
                </el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    name:"userExpent",
     data() {
      return {
           tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          outTime:"2小时28分",
          zip: 18.00
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          outTime:"2小时28分",
          zip: 18.00
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          outTime:"2小时28分",
          zip: 18.00
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          outTime:"2小时28分",
          zip: 18.00
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          outTime:"2小时28分",
          zip: 18.00
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          outTime:"2小时28分",
          zip: 18.00
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          outTime:"2小时28分",
          zip: 18.00
        }],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        
        value1: '1',
        value2: '2',
      };
    },
    methods:{
        sendTime(){
            console.log("使劲啊 ")
        }
    }
}
</script>